<template>
  <div class="mine">
    <div class="mine-top">
      <div class="mine-top-fixed">
        <p v-if='isLogin'
           class="mine-top-fixed-login">
          {{ userinfo.name }}
        </p>
        <router-link v-else
                     class="mine-top-fixed-login"
                     tag='p'
                     to='/login'>点击登录</router-link>
        <ul class="mine-top-fixed-ul">
          <li>
            <van-icon name="bill-o" />
            <span>我的订单</span>
          </li>
          <li>
            <van-icon name="shopping-cart-o" />
            <span>查询完成</span>
          </li>
          <li>
            <van-icon name="like-o" />
            <span>进行中</span>
          </li>
          <li style="border:none">
            <van-icon name="closed-eye" />
            <span>未支付</span>
          </li>
        </ul>
      </div>
      <div class="mine-top-radius-one"></div>
      <img v-if='isLogin'
           class="mine-top-radius-twe"
           src="http://img4.imgtn.bdimg.com/it/u=29519387,1524899117&fm=26&gp=0.jpg">
      <router-link v-else
                   class="mine-top-radius-twe"
                   tag='div'
                   to='/login'>
      </router-link>
    </div>
    <div class="mine-mian">
      <ul class="mine-mian-ul">
        <li class="mine-mian-ul-li"
            type="primary"
            @click="showPopup">
          <span>在线客服</span>
          <van-icon name="arrow"
                    class="mine-mian-ul-li-van" />
        </li>
        <li class="mine-mian-ul-li">
          <span>帮助与反馈</span>
          <van-icon name="arrow"
                    class="mine-mian-ul-li-van" />
        </li>
        <li class="mine-mian-ul-li">
          <span>关于联文</span>
          <van-icon name="arrow"
                    class="mine-mian-ul-li-van" />
        </li>
        <li class="mine-mian-ul-li"
            @click="input()">
          <span>退出登录</span>
          <van-icon name="arrow"
                    class="mine-mian-ul-li-van" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  data () {
    return {
      checked: true,
    }
  },
  computed: {
    ...mapState(['userinfo']),
    ...mapGetters(['isLogin'])
  },
  methods: {
    ...mapMutations(['toggleIslogin']),
    showPopup () {
      console.log(2)
      window.location.href = "http://p.qiao.baidu.com//im/index?siteid=6477403&ucid=10092912"
    },
    input () {
      Dialog.confirm({
        title: '警告！',
        message: '您确定退出登录？'
      }).then(() => {
        // this.toggleIslogin()
        this.toggleIslogin()
      }).catch(() => {
      })
    }
  }
}
</script>

<style  scoped>
.mine {
  height: 100%;
  background-color: #f5f5f5;
  overflow: hidden;
}
.mine-top {
  height: 2.9rem;
  background-color: #228ef7;
}
.mine-top-fixed {
  width: 7rem;
  height: 3.08rem;
  position: absolute;
  right: 0;
  left: 0;
  top: 1.38rem;
  margin: auto;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0rem 0rem 0.3rem white;
  z-index: 3;
}
.mine-top-fixed-login {
  text-align: center;
  margin-top: 0.88rem;
  margin-bottom: 0.62rem;
  font-size: 0.22rem;
}
.mine-top-fixed-ul {
  height: 0.9rem;
  display: flex;
  justify-content: space-between;
}
.mine-top-fixed-ul li {
  width: 25%;
  height: 0.54rem;
  margin-bottom: 0.1rem;
  border-right: 0.02rem solid #c5c5c5;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mine-top-fixed-ul li i {
  display: block;
  margin-top: -0.1rem;
  font-size: 0.44rem;
  margin-bottom: 0.3rem;
}
.mine-top-fixed-ul li span {
  font-size: 0.24rem;
}
.mine-top-radius-one {
  width: 1.44rem;
  height: 1.44rem;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  right: 0;
  left: 0;
  top: 0.66rem;
  margin: auto;
  z-index: 5;
}
.mine-top-radius-twe {
  width: 1.24rem;
  height: 1.24rem;
  background-color: #f8d949;
  border-radius: 50%;
  position: absolute;
  right: 0;
  left: 0;
  top: 0.76rem;
  margin: auto;
  z-index: 7;
}
.mine-top::before {
  content: "";
  display: table;
}
.mine-mian {
  margin-top: 2.5rem;
}
.mine-mian .van-switch__node {
  height: 0.45rem;
  width: 0.45rem;
}
.mine-mian-ul {
  height: 3.6rem;
  background-color: white;
}
.mine-mian-ul-li {
  height: 0.9rem;
  margin-left: 0.3rem;
  margin-right: 0.24rem;
  border-bottom: 0.01rem solid #f6f6f8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.24rem;
}
.mine-mian-ul-li-van {
  color: #b3aca8;
}
</style>
